day 15 Lstm 結合yolo 多隻斑馬魚使用介面

2024 iThome 鐵人賽

DAY 15

AI/ ML & Data

基於人工智慧與深度學習對斑馬魚做行為分析系列第 15 篇

16th鐵人賽

neilsu02

2024-08-17 22:11:29

140 瀏覽

分享至

今天是第十五天我們可以寫一個多隻斑馬魚的使用者介面，以下是程式碼
html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YOLO 和 LSTM 網頁界面</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>YOLO 和 LSTM 網頁界面</h1>
        <div class="file-input">
            <label for="file">Select Image/Video:</label>
            <input type="file" id="file" accept=".gif">
        </div>
        <button id="yolo-button">YOLO 辨識結果</button>
        <div id="image-container"></div>
        <div id="buttons-container" style="display: none;">
            <button id="zebrafish-video">斑馬魚運動軌跡影片</button>
            <button id="normal-behavior">正常佔比</button>
            <button id="fear-behavior">害怕佔比</button>
            <button id="anxiety-behavior">焦慮佔比</button>
            <button id="depression-behavior">壓抑佔比</button>
            <button id="download-video">下載影片</button>
        </div>
    </div>

    <script src="main.js"></script>
</body>
</html>

css部分

body {
    background-color: lightblue;
    font-family: Arial, sans-serif;
}

.container {
    max-width: 600px;
    margin: 50px auto;
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.file-input {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 5px;
}

button {
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

#image-container img {
    max-width: 100%;
    margin-top: 20px;
}

#buttons-container {
    margin-top: 20px;
    text-align: center; /* 使按鈕區域內的按鈕居中對齊 */
}

#buttons-container button {
    display: inline-block;
    margin: 10px 5px; /* 調整按鈕間距 */
    width: 45%; /* 每個按鈕寬度調整為父容器的45%，使每行最多容納兩個按鈕 */
    box-sizing: border-box; /* 包括內邊距和邊框在內的總寬度計算 */
}

javascript部分

document.getElementById('yolo-button').addEventListener('click', function () {
    const fileInput = document.getElementById('file');

    if (fileInput.files.length === 0) {
        // 如果沒有選擇圖片文件，仍然顯示功能按鈕
        document.getElementById('buttons-container').style.display = 'block';
        return;
    }

    const file = fileInput.files[0];

    // 假設這裡有 YOLO 計算邏輯
    // 目前只展示圖片
    const reader = new FileReader();
    reader.onload = function (e) {
        const imageContainer = document.getElementById('image-container');
        const img = document.createElement('img');
        img.src = e.target.result;
        imageContainer.innerHTML = '';
        imageContainer.appendChild(img);

        // 顯示四個功能按鈕
        document.getElementById('buttons-container').style.display = 'block';
    };
    reader.readAsDataURL(file);

    // 顯示功能按鈕
    document.getElementById('buttons-container').style.display = 'block';
});

document.getElementById('zebrafish-video').addEventListener('click', function () {
    // 播放斑馬魚運動軌跡影片的邏輯
    console.log('斑馬魚運動軌跡影片');
});

document.getElementById('normal-behavior').addEventListener('click', function () {
    // 顯示正常佔比的邏輯
    console.log('斑馬魚行為 (正常佔比)');
});

document.getElementById('fear-behavior').addEventListener('click', function () {
    // 顯示害怕佔比的邏輯
    console.log('斑馬魚行為 (害怕佔比)');
});

document.getElementById('anxiety-behavior').addEventListener('click', function () {
    // 顯示焦慮佔比的邏輯
    console.log('斑馬魚行為 (焦慮佔比)');
});

document.getElementById('depression-behavior').addEventListener('click', function () {
    // 顯示壓抑佔比的邏輯
    console.log('斑馬魚行為 (壓抑佔比)');
});

document.getElementById('download-video').addEventListener('click', function () {
    // 下載影片的邏輯
    console.log('下載影片');
    // 這裡假設有一個已處理好的影片文件
    const link = document.createElement('a');
    link.href = 'path/to/your/video.mp4'; // 替換為實際的影片文件路徑
    link.download = 'video.mp4';
    link.click();
});

這些段程式碼建立了一個網頁應用程式，結合了YOLO和LSTM模型，用來辨識上傳的影像或影片，並分析斑馬魚的行為。

1. index.html - 網頁的結構

這個檔案定義了網頁的基本結構，包括標題、樣式表連結、以及主要的互動元件。

<div class="container">: 包含了整個網頁的主要內容，包括標題、檔案上傳區域、辨識按鈕和功能按鈕區域。
檔案上傳: 用戶可以通過檔案上傳元件 (<input type="file">) 選擇要辨識的影像或影片。
YOLO 辨識按鈕: 用戶點擊此按鈕後，會觸發YOLO模型來處理上傳的影像，並顯示結果。
功能按鈕區域: 當YOLO辨識完成後，將顯示一組功能按鈕，用來進行斑馬魚的行為分析和影片下載。

2. style.css - 網頁的樣式

這個檔案控制了網頁的外觀和佈局，讓應用程式看起來更美觀。

背景和字體: 使用淺藍色作為背景色，並設定了全局的字體樣式。
容器樣式: 設定了容器的最大寬度、內邊距、背景色和圓角，讓內容居中並顯示在白色背景上。
按鈕樣式: 定義了按鈕的顏色、邊框、邊距和滑鼠懸停效果，讓按鈕具有視覺上的反饋效果。
功能按鈕佈局: 讓功能按鈕在網頁上對齊，並以行為單位進行排列，使它們顯示在合適的位置。

3. main.js - 網頁的互動邏輯

這個檔案包含了所有的JavaScript邏輯，負責管理用戶互動和功能的觸發。

YOLO 辨識結果按鈕 (yolo-button):
- 監聽按鈕點擊事件，檢查用戶是否上傳了檔案。
- 使用 FileReader 將上傳的檔案讀入並顯示在頁面上。
- 一旦圖片顯示完成，則顯示與斑馬魚行為分析相關的功能按鈕。
斑馬魚運動軌跡影片 (zebrafish-video):
- 監聽影片按鈕的點擊事件，用來觸發斑馬魚運動軌跡影片的播放。
斑馬魚行為分析:
- 包含四個按鈕，分別用來顯示斑馬魚行為的「正常佔比」、「害怕佔比」、「焦慮佔比」和「壓抑佔比」。
- 每個按鈕都有相應的邏輯，用來處理並顯示這些行為的結果。
下載影片 (download-video):
- 監聽按鈕點擊事件，觸發影片的下載邏輯。用戶可以通過此按鈕下載處理過的影片檔案。